<template>
    <view class="container" :style="themeColor">
        <view class="main">
            <view class="card-cell type-cell">
                <text class="cell-title">选择发布分类</text>
                <view class="types">
                    <text
                        class="btn"
                        :class="typeindex == index ? 'btn-select' : 'btn-gray'"
                        v-for="(item, index) in items"
                        :key="index"
                        @click="select(item, index)"
                        >{{ item.Name }}</text
                    >
                </view>
            </view>
            <view class="card-cell type-cell">
                <text class="cell-title">我来说两句</text>
                <textarea class="textarea" v-model="value" placeholder="我来说两句"></textarea>
            </view>
            <view class="card-cell type-cell">
                <text class="cell-title">上传图片/视频</text>
                <view class="img-cell">
                    <view>
                        <view
                            class="add-img"
                            v-if="(selectType == 1 && imageList.length < 9) || selectType == 0 || !showVideo"
                            @tap="selectUpload">
                            <uni-icons type="camera" class="iconColor" size="80"></uni-icons>
                            <text style="color: #cccccc">添加</text>
                        </view>
                    </view>
                    <block v-if="selectType == 1">
                        <block v-for="(image, index) in imageList" :key="index">
                            <view class="img-item">
                                <image
                                    class="img"
                                    :src="easyGetImgUrl(image)"
                                    :data-src="easyGetImgUrl(image)"
                                    @tap="previewImage"
                                    mode="aspectFill"></image>
                                <view @click="del(index)">
                                    <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                                </view>
                            </view>
                        </block>
                    </block>
                    <view v-if="selectType == 2 && showVideo">
                        <view class="img-item video-item">
                            <video :src="src" style="video"></video>
                            <view @click="delvideo">
                                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="card-cell type-cell">
                <view class="cell-title cell-title-pro" @click="selectProduct"
                    ><text>添加商品</text><uni-icons type="arrowright" color="#333"></uni-icons
                ></view>
                <view class="img-cell" v-if="productList.length > 0" style="margin-top: 40rpx">
                    <block v-for="(image, index) in productList" :key="index">
                        <view class="img-item">
                            <image class="img" :src="easyGetImgUrl(image.ThumbnailUrl50)" mode="aspectFill"></image>
                            <view @click="delproduct(index)">
                                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
            <view class="acton-bar">
                <button class="btn btn-success" @click="submit">发布</button>
            </view>
        </view>
        <uni-popup ref="selecttip" type="center" :animation="false" :maskClick="true">
            <view class="pop-return-box">
                <view class="pop-list">
                    <view @click="selectpic">照片(最多9张)</view>
                    <view @click="selectvideo">视频(不大于100M)</view>
                </view>
            </view>
        </uni-popup>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { uploadImage } from "@/service/api/file.js"
import { GetMomentCategoryList, AddMoment } from "@/service/api/moment.js"
import { GetSubFormTypeByType, GetDetailListByType } from "@/service/api/customForm.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
export default {
	components:{
		privacyAgreement
	},
    data() {
        return {
            items: [],
            typeindex: -1,
            imageList: [],
            imageListMore: [],
            customForm: [],
            imgForms: [],
            value: "",
            selectType: 0,
            src: "",
            showVideo: false,
            videoImgSrc: "",
            data: {
                LimitId: "",
            },
            productList: [],
        }
    },
    mounted() {
        this.getTabs()
    },
    methods: {
        ...mapMutations(["UP_MOMENT_VIEW"]),
        getTabs() {
            GetMomentCategoryList().then((res) => {
                if (res.State == 1) {
                    // this.items.length = 0
                    // let recommend = [{ID:0,Name:'无分类'}];
                    // this.items = recommend.concat(res.Data)
                    this.items = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        selectpic() {
            this.selectType = 1
            this.chooseImage()
            this.$refs.selecttip.close()
        },
        selectvideo() {
            this.selectType = 2
            this.$refs.selecttip.close()
            this.chooseVideo()
        },
        //选择类型
        select(item, index) {
            this.typeindex = index
        },
        //预览图片
        previewImageOne(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
        previewImageMore(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageListMore,
            })
        },
        //选择图片
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 9, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
        chooseVideo() {
            var self = this
            uni.chooseVideo({
                count: 1,
                sourceType: ["camera", "album"],
                success: function (res) {
                    // self.src = res.tempFilePath;
                    self.upLoadvideo(res)
                },
            })
        },
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
        },
        delproduct(index) {
            this.productList.splice(index, 1)
            this.data.LimitIds = []
            let limitIds = []
            this.productList.forEach((e) => {
                limitIds.push(e.ID)
            })
            this.data.LimitIds = limitIds.join(",")
        },
        delvideo() {
            this.src = ""
            this.showVideo = false
        },
        //上传图片
        upLoadPicFn(files) {
            for (var i = 0; i < files.tempFilePaths.length; i++) {
                let param = {
                    filePath: files.tempFilePaths[i],
                    formData: {},
                }
                uploadImage(param).then((e) => {
                    if (e.Data) {
                        this.imageList.push(e.Data.FullPath)
                        if (this.imageList.length > 9) {
                            this.imageList.length = 9
                        }
                    }
                })
            }
        },
        upLoadvideo(files) {
            uni.showLoading({
                title: "上传中",
            })
            let param = {
                filePath: files.tempFilePath,
                formData: {},
            }
            uploadImage(param).then((e) => {
                if (e.Data) {
                    uni.hideLoading()
                    this.src = e.Data.FullPath
                    this.videoImgSrc = this.src + "?x-oss-process=video/snapshot,t_0,f_jpg"
                    this.showVideo = true
                }
            })
        },
        selectUpload() {
            if (this.selectType == 0) {
                this.$refs.selecttip.open()
            } else if (this.selectType == 1) {
                this.chooseImage()
            } else {
                this.chooseVideo()
            }
        },
        //提交反馈
        submit() {
            if (this.typeindex == -1) {
                this.easyToast("请选择发布分类")
                return
            }
            if (this.value == "") {
                this.easyToast("请填写我来说两句")
                return
            }
            if (this.selectType == 0) {
                this.easyToast("请上传图片或视频")
                return
            }
            if (this.selectType == 1 && this.imageList.length == 0) {
                this.easyToast("请上传图片")
                return
            }
            if (this.selectType == 2 && this.src == "") {
                this.easyToast("请上传视频")
                return
            }
            let param = {
                categoryId: this.items[this.typeindex].ID,
                content: this.value,
            }
            if (this.selectType == 1) {
                param.imageSrc = this.imageList.join(",")
            }
            if (this.selectType == 2) {
                param.videoUrl = this.src
                param.videoImgSrc = this.videoImgSrc
            }
            if (this.data.LimitIds) {
                param.productIds = this.data.LimitIds
            }
            AddMoment(param).then((res) => {
                if (res.State) {
                    this.easyToast("发布成功")
                    this.UP_MOMENT_VIEW(new Date().getTime())
                    setTimeout((e) => {
                        this.easyGoBack()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        selectProduct() {
            uni.navigateTo({
                url: "/pages_me/packet/moment/select-product?limitIds=" + this.data.LimitIds,
                events: {
                    getSelectData: (data) => {
                        if (data) {
                            let limitIds = []
                            data.data.forEach((e) => {
                                limitIds.push(e.ID)
                            })
                            this.data.LimitIds = limitIds.join(",")
                            this.productList = data.data
                        }
                    },
                },
            })
        },
    },
}
</script>

<style lang="scss">
.main {
    padding: $app-page-padding;
}

.type-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .cell-title {
        display: flex;
        flex: 1;
        margin-bottom: 40rpx;
        font-weight: 600;
    }
    .cell-title-pro {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 0;
    }
    .types {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        .btn {
            width: 30%;
            // padding: 0 20rpx;
            padding: 0;
            border-radius: $border-radius-10;
            margin-bottom: 20rpx;
        }

        &:after {
            content: " ";
            width: 30%; //这个宽度和子元素宽度一致
            height: 0;
            display: block;
        }
    }
}

.textarea {
    display: flex;
    width: 100%;
    height: 140rpx;
    font-size: $font-size-24;
    line-height: 40rpx;
}

.acton-bar {
    margin-top: 40rpx;

    .btn {
        height: 70rpx;
    }
}
.btn-select {
    color: $app-color-main;
    border: 2rpx solid $app-color-main;
    font-weight: bold;
}
.btn-gray {
    border-color: #ccc;
}
.pop-list {
    view {
        display: block;
        padding: 24rpx;
        text-align: center;
    }
    view:first-child {
        border-bottom: 1rpx solid #ebebeb;
    }
}
.video-item {
    width: auto !important;
    height: auto !important;
}
</style>
